<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>菜单添加</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/addActor.css">
  <script src="lib/js/jquery-1.12.4.js"></script>
  <script src="js/loginText.js"></script>

</head>

<body>
  <div class="myTable">
    <form id="addCategory">
      <div class="form-group">
        <label for="actor">请选择父菜单名称</label>
        <select name="fatherCategory" id="fatherCategory" class="form-control mySelect" required="required">
          <!-- todo -->
        </select>
      </div>

      <div class="form-group">
        <label for="exampleInputEmail1">请输入子菜单名称</label>
        <input type="text" class="form-control" id="sunCategory" placeholder="输入子菜单名称" name="sunCategory">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">请输入url路径</label>
        <input type="text" class="form-control" id="urlAddress" placeholder="输入url" name="urlAddress">
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>

  <!-- 下拉选择框渲染 -->
  <script type="text/template" id="mySelectData">
    <% for(let i = 0; i < data.length; i++) { %>
      <option value="<%=data[i].father%>"><%=data[i].father%></option>
    <% } %>
  </script>


  <script>
    window.onload = function () {


      // 渲染下拉框父菜单
      getAllCategoryAndSunCategory(function (res) {
        console.log(res)
        $('.mySelect').html(template('mySelectData', {
          data: res
        }))
      })


      $("#addCategory").submit(function (e) {
        e.preventDefault()
        var fatherCategory = $('#fatherCategory')[0].value
        var sunCategory = $('#sunCategory')[0].value.trim()
        var urlAddress = $('#urlAddress')[0].value.trim()
        console.log(fatherCategory)
        console.log(sunCategory)
        console.log(urlAddress)


        if (!sunCategory) {
          window.alert('子菜单名不能为空')
          return
        }
        if (!urlAddress) {
          window.alert('url不能为空')
          return
        }

        $.ajax({
          url: '/pages/category/addCategory',
          type: 'post',
          data: JSON.stringify({
            fatherCategory,
            sunCategory,
            urlAddress
          }),
          dataType: 'json',
          contentType: 'application/json;charset=UTF-8',
          success: function (res) {
            if (res.success) {
              // 成功了页面就跳转
              self.location = 'category.html'
            } else if (res.error) {
              window.alert(res.error)
            }
          }
        })
      })
    }


    // 获取所有父菜单和子菜单。。。父菜单带子菜单函数封装
    function getAllCategoryAndSunCategory(callback) {
      $.ajax({
        url: '/pages/category/getAllCategoryAndSunCategory',
        type: 'post',
        data: '',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        success: function (res) {
          callback && callback(res)
        }
      })
    }
  </script>
  <script src="lib/js/bootstrap.js"></script>
  <script src="lib/js/template-native.js"></script>


  <script src="lib/js/mock.js"></script>
  <script src="mock/addCategory.js"></script>
  <script src="mock/fatherAndSun.js"></script>

</body>

</html>